<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout_backend/base_layout">

<style layout:fragment="css">
</style>

<div layout:fragment="content">
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">岗位</label>
                            <div class="layui-input-inline">
                                <input type="text" name="station" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <div class="layui-btn-group">
            <a type="button" class="layui-btn data-add-btn" href="/admin/user/information">添加</a>
            <button class="layui-btn layui-btn-danger data-delete-btn">删除</button>
        </div>
        <!-- 该标签为表内内容动态响应 -->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs data-count-edit" lay-event="details">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>
</div>
<script layout:fragment="script">
    layui.use(['form', 'table','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            element = layui.element;

        //档案信息展示
        table.render({
            elem: '#currentTableId',
            url: 'http://localhost:8090/admin/archives/archivesList_Json?',
            cols: [
                    [
                {type: "checkbox", width: 50, fixed: "left"},
                {field: 'uid', width: 80, title: 'ID', sort: true},
                {field: 'name', width: 75, title: '用户名'},
                {field: 'station', width: 75, title: '岗位', sort: true},
                {field: 'duty', width: 75, title: '职务'},
                {field: 'utel', width: 120,title: '联系方式'},
                {field: 'uemail', width: 150, title: '邮箱', sort: true},
                //显示该用户总学习时长
                {field: 'format', width: 120, title: '学习时长', sort: true},
                //显示已学完课程数量
                {field: 'course', width: 75, title: '课程', sort: true},
                //显示已完成考试数量
                {field: 'exam', width: 75, title: '考试', sort: true},
                {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
                ]
                    ],
            limits: [4,10, 20, 30, 50, 100],
            limit: 10,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var resultName = JSON.stringify(data.field.username);
            var resultStation = JSON.stringify(data.field.station)
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    resultName,resultStation
                }
            }, 'data');

            return false;
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {
        	{{
        	element.tabAdd('个人信息',{
        		title:'个人信息'
        		,content:'user/information'
        	});
        	}}
            layer.msg('添加数据');
        });

        // 监听删除操作
        $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            if(data.length === 0){
  	          layer.msg('请选择一行');
  	        } else {
  	          //批量删除用户 信息操作，使用ajax异步响应
  	          layer.confirm('确认删除这些用户吗？',function (index){
  	        	  {{
  	        	  $.ajax({
  	        		  url:'/admin/archives/betchDelete',
  	        		  data:JSON.stringify(data),
  	        		  method:'POST',
  	        		  contentType:'application/json',
  	        		  success:function(msg){
  	        			  location.reload();
  	        		  }
  	        	  });
  	        	  }}
  	        	  layer.close(index);
  	          });
  	        }	
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        //监听单行信息后的按钮点击
        table.on('tool(currentTableFilter)', function (obj) {
        	var uid = obj.data.uid -100000;
            if (obj.event === 'edit') {
            	window.open('/admin/user/information?uid='+uid,'_self');
            	return;
            }
            if(obj.event === 'details'){
            	window.open('/admin/detail/list?uid='+uid,'_self');
            	return;
            }
            if (obj.event === 'delete') {
                layer.confirm('确定要刪除该用户吗', function (index) {
                    {{
                    	$.ajax({
                    		url:'/admin/archives/singleDelete',
                    		data:{uid:obj.data.uid-100000},
                    		method:"POST",
                    		success:function(){
                    			location.reload();
                    		}
                    	})
                    }}
                });
                return;
            } 
        });

    });
</script>

</html>